////////////////////////////第一部分 基本用法
let style = {
    color: 'red',
    fontSize: '50px'//这里css属性名称的横线连接font-size 改为js的小驼峰命名法

}
let jsx = <div className='jsx' style={style}>jsx...</div>;
let obj = {}

ReactDOM.render(
    jsx,
    document.getElementById('app')
);

////////////////////////////第二部分 数据逻辑处理
let name = "Xuqiaofeng";
let names = ["Bill","Jordan","James"]
let flag = false;
let jsx = (
    <div >
        {/* 变量的使用 */}
        <p>I am {name}</p>
        {/* 条件判断 */}
        {
            flag ? <p>I am {name}</p> : <p>I am not {name}</p>
        }
        {/* 数组循环 */}
        {
            names.map((name, index)=><p key={index}>Hello,I am {name}</p>)
        }
        
    </div>
);

ReactDOM.render(
    jsx,
    document.getElementById('app')
);

////////////////////////////第三部分 组件部分
//es5组件写法
function TestComponent() {//组件名首字母必须大写
    return <h1>I am Xuqiaofeng</h1>
}
//es6组件写法
class ES6Component extends React.Component{
    render() {
        return <h1>I am in es6 </h1>
    }
}

ReactDOM.render(
    <div>
        <TestComponent/>
        <ES6Component/>
    </div>,//这里如果是jsx变量,就直接写变量，如果是组件，则用<组件名/>的形式
    document.getElementById('app')
);


////////////////////////////第四部分 组件和props
class ES6Component extends React.Component{
    constructor(props) {//props在子组件里只能被使用，不能被改变,props用来取父 组件传递 过来的参数
        super(props);//这里直接调用父类的this指针
        // this.state = {
        //     name: "MengLiuCeng XiaoXianNv"
        // }
    }
    render() {
        // setTimeout(()=>{
        //     this.setState({
        //         name: 'AsyncMengMeng'
        //     })
        // },2000)
        return <h1>I am {this.props.name} </h1>
    }
}

ReactDOM.render(
    <div>
        <ES6Component name='WeChat'/>
    </div>,//这里如果是jsx变量,就直接写变量，如果是组件，则用<组件名/>的形式
    document.getElementById('app')
);